import React, { useState } from 'react'
import '@/assets/css/RoomInfo.scoped.css'
import { useLocation } from 'react-router'
import { Map } from 'react-amap'
const Component = () =>
{
    const params = new URLSearchParams(useLocation().search)
    const id = params.get('id')
    const [room,setRoom] = useState<any>({})
    const [center,setCenter] = useState<any>({})
    useEffect(()=>{
        getRoom()
        getCommentList()
    },[])
    const getRoom = async()=>{
        let result = await React.request.get('/index/room',{params:{id}})
        if(!result.code){
            React.toast(result.msg,'back','fail')
            return
        }
        setRoom(result.data)
        setCenter({ longitude: 115, latitude: 30 })
    }
    const [commentList,setCommentList] = useState<Array<any>>([])
    const getCommentList = async()=>{
        let result = await React.request.get('/index/comment',{params:{roomid:id,type:'easy'}});
        setCommentList(result)
    }
    const confirm = ()=>{
        // let result = await React.request.post('/index/order',{})
        React.navigate(`/order/confirm?id=${id}`)
    }
    return (
        <>
            <React.UI.Image src={room.thumb_text} width={'100%'} height={'40vh'} fit='cover' /> 

            <div className="detail_top">
                {/* 房间简介 */}
                <div id="intro" className="intro">
                    <div className="title">{room.name}</div>
                    <React.UI.Space>
                        {room.flag?room.flag.split(',').map((f, index) => (
                            <React.UI.Tag color='default' key={index}>{f}</React.UI.Tag>
                        )):''}
                    </React.UI.Space>
                    <div className="title">{room.content}</div>
                </div>

                {/* 预定须知 */}
                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{room.name}</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">剩余房间数量：</span>
                        <span>{room.total}</span>
                    </div>
                </div>
                
                <div style={ {width: '100%', height: 200} }>
                    <Map amapkey={'2bade340d3df74bb88165cd2bf986f22'}  center={center} zoom={9}/>
                </div>
                {/* 评论内容 */}
                <div id="comment" className="comment">
                    <div className="title">评价</div>
                    {commentList.map((item,index)=>(
                        <div className="rate-list-item">
                        <div className="item-content">
                            <div className="content-prefix">
                                <div className="ratelist">
                                    <div className="image">
                                        <img src={item.business?item.business.avatar_text:''} alt="" />
                                    </div>
                                    <p className="nickname">{item.business?item.business.nickname:''}</p>
                                </div>
                            </div>
                            <div className="content-main">
                                <div className="rate">
                                    <React.UI.Rate readOnly value={item.rate} />
                                </div>
                                <div className="item-description">
                                    <p>{item.comment}</p>
                                    <p className="item-time">{item.comdate}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    ))}

                    <div className="divider-horizontal">
                        <div className="divider-content">
                            <a href="hotel-rate.html">更多评价内容</a>
                        </div>
                    </div>
                </div>
                <div className="foot-bar">
                    <div className="price">￥{room.price}</div>
                    <React.UI.Button onClick={confirm} color='primary' disabled={room.state}>立即预定</React.UI.Button>
                </div>
            </div>
            
        </>
    )
}

export default Component